<template>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="40%"
            :show-close="false"
            :close-on-click-modal="false"
            custom-class="addProject"
    >
        <div class="project_body">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="left">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="名称:" prop="name">
                            <el-input v-model="ruleForm.name" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="学段:" prop="name">
                            <el-select v-model="ruleForm.region" placeholder="请选择活动区域" style="width:100%" size="small">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年级:" prop="name">
                            <el-select v-model="ruleForm.region" placeholder="请选择活动区域" style="width:100%" size="small">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="考试类型:" prop="name">
                            <el-select v-model="ruleForm.region" placeholder="请选择活动区域" style="width:100%" size="small">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="考试识别:" prop="name">
                            <el-select v-model="ruleForm.region" placeholder="请选择活动区域" style="width:100%" size="small">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="文理类型:" prop="name">
                            <el-select v-model="ruleForm.region" placeholder="请选择活动区域" style="width:100%" size="small">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">

                        <el-form-item label="项目日期:" prop="name">
                            <el-row>
                                <el-col :span="10">
                                    <el-date-picker
                                            style="width:100%"
                                            v-model="ruleForm.value1"
                                            type="datetime"
                                            size="small"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="4">
                                    <span>
                                      至
                                     </span>
                                </el-col>
                                <el-col :span="10">
                                    <el-date-picker
                                            v-model="ruleForm.value1"
                                            type="datetime"
                                            size="small"
                                            style="width:100%"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                </el-col>
                            </el-row>




                        </el-form-item>

                    </el-col>
                    <el-col :span="24">

                        <el-form-item label="阅卷日期:" prop="name">
                            <el-row>
                                <el-col :span="10">
                                    <el-date-picker
                                            style="width:100%"
                                            v-model="ruleForm.value1"
                                            type="datetime"
                                            size="small"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="4">
                                    <span>
                                      至
                                     </span>
                                </el-col>
                                <el-col :span="10">
                                    <el-date-picker
                                            v-model="ruleForm.value1"
                                            type="datetime"
                                            size="small"
                                            style="width:100%"
                                            placeholder="选择日期时间">
                                    </el-date-picker>
                                </el-col>
                            </el-row>




                        </el-form-item>

                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目服务器" prop="region">
                            <el-select v-model="ruleForm.region"   size="small"  style="width:100%" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="活动名称:" prop="name">
                            <el-input v-model="ruleForm.name" size="small"  style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" >
                        <el-form-item label="" prop="name" class="checkbox_item">
                            <el-checkbox-group v-model="ruleForm.type">
                                <el-checkbox label="允许学生查询" name="type"></el-checkbox>
                                <el-checkbox label="允许购买速提分" name="type"></el-checkbox>
                                <el-checkbox label="允许APP阅卷" name="type"></el-checkbox>
                                <el-checkbox label="在线考试" name="type"></el-checkbox>
                                <el-checkbox label="联考项目" name="type"></el-checkbox>
                                <el-checkbox label="允许教师查询" name="type"></el-checkbox>
                                <el-checkbox label="允许购买知识点分析" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">

            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
    </el-dialog>
</template>

<script>
    export default {
        name: "addProject",
        data() {
            return {
                dialogVisible: false,
                ruleForm:{
                    type: [],
                },
                rules:{}
            }
        }
    }
</script>
<style lang="scss">
    .project_body{
       .el-form-item{
           margin-bottom: 10px;
           .el-checkbox-group{
               display: flex;
               justify-content: flex-start;
               align-content: center;
               flex-wrap: wrap;
           }
       }
    }
    .checkbox_item{
        .el-form-item__content{
            margin-left:0!important;
        }

    }
</style>
<style lang="scss" scoped>

</style>
